<template>
	<view class="list">
		<view class="item" v-for="item in balanceList" :key="item.transactionId" @click="showPop(item.transactionId)">
			<view>
				<text class="title">{{item.title}}</text>
				<text class="transactionValue">{{accDiv(item.transactionValue || 0,100)}}</text>
			</view>
			<view>
				<text class="time">{{item.time}}</text>
				<text class="remainingValue">钱包余额：￥{{accDiv(item.remainingValue || 0,100)}}</text>
			</view>
		</view>
		<view class="noDatabg" v-if="!balanceList.length">
			<img src="/static/noDatabg.png" alt="" />
		</view>
		<orderDetails ref="orderDetails"></orderDetails>
	</view>
</template>

<script>
	import MyMinix from '@/utils/minix/minix.js';
	import { queryWalletTransactions } from "@/request/api.js"
	export default {
		mixins: [MyMinix],
		data() {
			return {
				balanceList:[
					// {title:'测试',transactionValue:100,time:100,remainingValue:100}
				]
			};
		},
		onShow() {
			this.queryWalletTransactionsFn();
		},
		methods: {
			// 显示订单详情 
			showPop(id){
				this.$refs.orderDetails.showPop(id);
			},
			async queryWalletTransactionsFn(){
				uni.showLoading({
					title:'数据加载中...',
				})
				let res = await  queryWalletTransactions({method: "GET",})
				if(res.code == 200){
					this.balanceList = res.result;
					uni.hideLoading()
				}else{
					uni.showToast({
						icon:res.message,
						icon:'none'
					})
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.list{
		min-height: calc(100vh - 30rpx);
		background:  linear-gradient(#ec5d21, #ffffff 45%);
		padding:30rpx 0;
		.item{
			margin:0 30rpx 30rpx;
			padding:30rpx;
			// border:1rpx solid #ccc;
			border-radius:20rpx;
			box-shadow: 0 0 20rpx 0rpx rgba(0, 0, 0, .1);
			background:#fff;
			.title{
				font-size:28rpx;
				font-weight: 600
			}
			.transactionValue{
				font-size:32rpx;
				color:#EB5B1E ;
				font-weight: 600
			}
			.remainingValue{
				font-weight: 600
			}
			&>view{
				@include flexs(space-between, center);
				&:first-child{
					padding-bottom:30rpx;
				}
				&:last-child{
					font-size: 22rpx;
				}
			}
		}
	}
	
	.noDatabg {
		width: 600rpx;
		height: 600rpx;
		margin: 200rpx auto 0;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>
